<!-- src/components/common/Sidebar.vue -->
<template>
    <div class="sidebar">
      <div class="sidebar-item" @click="goToHome">首页</div>
      <div class="sidebar-item" @click="goToNotes">笔记</div>
      <div class="sidebar-item" @click="goToProfile">个人中心</div>
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  const goToHome = () => {
    router.push('/');
  };
  
  const goToNotes = () => {
    router.push('/notes');
  };
  
  const goToProfile = () => {
    router.push('/user/1'); // 假设用户ID为1
  };
  </script>
  
  <style scoped>
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #f5f5f5;
    padding: 20px;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  }
  .sidebar-item {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .sidebar-item:hover {
    background-color: #e0e0e0;
  }
  </style>